<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>3D导航栏</title>
    <style>
      * {
        list-style: none;
        padding: 0;
      }
      li {
        float: left;
        position: relative;
        width: 150px;
        height: 30px;
        /*overflow: hidden;*/
        /*perspective: 200px;*/
        margin-left: 10px;
        transform-style: preserve-3d;
        /*transform-origin: bottom;*/
        transition: all 0.5s;
      }
      li:hover {
        transform: rotateX(90deg);
      }
      .fir,
      .sec {
        position: absolute;

        width: 150px;
        height: 30px;
        text-align: center;
        line-height: 30px;
      }
      .fir {
        transform: translateZ(1px);
        background-color: pink;
      }
      .sec {
        background-color: #9bceea;
        /*注意先移动后旋转*/
        transform: translateY(15px) rotateX(-90deg);
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <div class="fir">你是</div>
        <div class="sec">大飞组</div>
      </li>
      <li>
        <div class="fir">你是</div>
        <div class="sec">大飞组</div>
      </li>
      <li>
        <div class="fir">你是</div>
        <div class="sec">大飞组</div>
      </li>
    </ul>
  </body>
</html>
